<template>
  <div class="swiper">
    <el-carousel :interval="4000" type="card" height="350px">
      <el-carousel-item v-for="(item,index) in carouselList" :key="index">
        <img :src="item.picture"
             @click="toPlay(item.song.id,item.song.url,item.song.name,item.song.singerName,item.song.picture,index,item.song.lyric)">
      </el-carousel-item>
    </el-carousel>
  </div>

</template>

<script>
import {mixin} from "@/mixins";

export default {
  components: {},
  mixins: [mixin],
  name: "Carousel",
  data() {
    return {
      //轮播图数据
      carouselList: [
        {
          picture: require('../assets/img/carousel/1.jpg'), song: {
            album: "孤勇者",
            id: 41,
            lyric: "[00:00.000] 作词 : 唐恬\r\n[00:00.406] 作曲 : 钱雷\r\n[00:00.812] 编曲 : 钱雷\r\n[00:01.218] 制作人 : 钱雷\r\n[00:01.624] 吉他 : 高飞\r\n[00:02.030] 人声录音 : 利伟明\r\n[00:02.436] 人声录音室 : 雅旺录音室\r\n[00:02.842] 人声编辑 : 汝文博\r\n[00:03.248] 混音 : 周天澈\r\n[00:03.654] 母带 : 周天澈\r\n[00:04.63]词版权管理方：北京梦织音传媒有限公司\r\n[00:04.78]曲版权管理方：索尼音乐版权代理（北京）有限公司\r\n[00:04.92]录音作品及MV版权：EAS MUSIC LTD\r\n[00:05.00]联合出品：拳头游戏/腾讯游戏/腾讯视频\r\n[00:05.07]出品监制：霍锦 卢泓宇\r\n[00:22.29]都 是勇敢的\r\n[00:28.50]你额头的伤口 你的 不同 你犯的错\r\n[00:36.96]都 不必隐藏\r\n[00:43.20]你破旧的玩偶 你的 面具 你的自我\r\n[00:51.46]\r\n[00:51.76]他们说 要带着光 驯服每一头怪兽\r\n[00:58.65]他们说 要缝好你的伤 没有人爱小丑\r\n[01:05.98]为何孤独 不可 光荣\r\n[01:09.25]人只有不完美 值得歌颂\r\n[01:13.52]谁说污泥满身的不算英雄\r\n[01:20.50]\r\n[01:20.80]爱你孤身走暗巷\r\n[01:22.88]爱你不跪的模样\r\n[01:24.61]爱你对峙过绝望\r\n[01:26.41]不肯哭一场\r\n[01:28.05]\r\n[01:28.35]爱你破烂的衣裳\r\n[01:30.11]却敢堵命运的枪\r\n[01:31.95]爱你和我那么像\r\n[01:33.83]缺口都一样\r\n[01:35.23]\r\n[01:35.53]去吗？配吗？这褴褛的披风\r\n[01:39.43]战吗？战啊！以最卑微的梦\r\n[01:43.08]致那黑夜中的呜咽与怒吼\r\n[01:50.35]谁说站在光里的才算英雄\r\n[02:08.41]\r\n[02:08.71]他们说 要戒了你的狂 就像擦掉了污垢\r\n[02:16.25]他们说 要顺台阶而上 而代价是低头\r\n[02:23.33]那就让我 不可 乘风\r\n[02:26.59]你一样骄傲着 那种孤勇\r\n[02:31.07]谁说对弈平凡的不算英雄\r\n[02:38.05]\r\n[02:38.35]爱你孤身走暗巷\r\n[02:40.29]爱你不跪的模样\r\n[02:42.10]爱你对峙过绝望\r\n[02:43.85]不肯哭一场\r\n[02:45.92]\r\n[02:45.92]爱你破烂的衣裳\r\n[02:47.62]却敢堵命运的枪\r\n[02:49.43]爱你和我那么像\r\n[02:51.37]缺口都一样\r\n[02:52.86]\r\n[02:53.16]去吗？配吗？这褴褛的披风\r\n[02:56.85]战吗？战啊！以最卑微的梦\r\n[03:00.55]致那黑夜中的呜咽与怒吼\r\n[03:07.82]谁说站在光里的才算英雄\r\n[03:12.25]\r\n[03:12.55]你的斑驳 与众不同\r\n[03:19.89]你的沉默 震耳欲聋 You Are The Hero\r\n[03:26.14]\r\n[03:26.44]爱你孤身走暗巷\r\n[03:28.27]爱你不跪的模样\r\n[03:30.09]爱你对峙过绝望\r\n[03:31.94]不肯哭一场 (You Are The Hero)\r\n[03:33.45]\r\n[03:33.75]爱你来自于蛮荒\r\n[03:35.75]一生不借谁的光\r\n[03:37.43]你将造你的城邦\r\n[03:39.25]在废墟之上\r\n[03:40.72]\r\n[03:41.02]去吗？去啊！以最卑微的梦\r\n[03:44.85]战吗？战啊！以最孤高的梦\r\n[03:48.54]致那黑夜中的呜咽与怒吼\r\n[03:55.81]谁说站在光里的才算英雄",
            name: "孤勇者",
            picture: "/img/song/孤勇者.jpg",
            singerId: 6,
            singerName: "陈奕迅",
            style: "摇滚",
            url: "/song/陈奕迅-孤勇者.mp3",
          }
        },
        {
          picture: require('../assets/img/carousel/2.jpg'), song: {
            album: "春潮",
            id: 126,
            lyric: "[00:00.000] 作词 : 2KM\r\n[00:01.000] 作曲 : 2KM\r\n[00:02.000] 编曲 : 橘子海 (Orange Ocean)\r\n[00:03.000] 制作人 : 橘子海 (Orange Ocean)\r\n[00:04.000] 录音师 : 橘子海 (Orange Ocean)\r\n[00:05.000] 录音棚 : 陋室音乐L.O.W Studio\r\n[00:06.000] 混音师 : 李天衣\r\n[00:07.000] 吉他 : 2KM\r\n[00:08.000] 贝斯 : 小路\r\n[00:09.000] 鼓 : 卿溪\r\n[00:10.000] 键盘 : 卿溪\r\n[00:11.000] 母带后期 : John Davis@Metropolis Studio\r\n[00:55.900]Upset\r\n[00:58.200]Cold wet\r\n[00:59.959]I just gonna feel alright\r\n[01:05.159]This time\r\n[01:07.558]Love bites\r\n[01:09.870]Wild roses in my hand\r\n[01:15.108]\r\n[01:33.659]Somehow\r\n[01:36.030]Realize\r\n[01:38.489]Father s calling down\r\n[01:43.078]This time\r\n[01:45.438]Love blinds\r\n[01:47.790]Wild roses in my hand\r\n[01:51.760]I travel all the town\r\n[01:57.030]From afar\r\n[02:01.078]Idol s falling down\r\n[02:06.438]Into the dust\r\n[02:11.899]\r\n[02:48.780]You lie your lie in\r\n[02:53.369]Such a beautiful\r\n[02:58.060]Don t cry Don t cry\r\n[03:02.618]I put my summer in your hand\r\n[03:06.889]I travel all the town\r\n[03:12.259]From afar\r\n[03:16.409]Idol s falling down\r\n[03:21.409]Into the dust\r\n[03:25.919]I travel all the towns\r\n[03:31.109]From a star\r\n[03:35.310]Idol s falling down\r\n[03:40.549]Into the past\r\n[03:46.629]",
            name: "夏日漱石",
            picture: "/img/song/夏日漱石.jpg",
            singerId: 102,
            singerName: "橘子海",
            style: "摇滚",
            url: "/song/橘子海-夏日漱石.mp3"
          }
        },

        {
          picture: require('../assets/img/carousel/3.jpg'), song: {
            album: "热血天然",
            id: 127,
            lyric: "[ti:热血天然]\r\n[ar:张杰]\r\n[al:热血天然]\r\n[by:p_pxxinzhao]\r\n[offset:0]\r\n[00:00.00]热血天然 - 张杰\r\n[00:02.51]词：张杰/董玉方\r\n[00:03.82]曲：曲世聪\r\n[00:04.48]编曲：邱俊杰/宋睿/文一丁\r\n[00:06.57]项目企划：TME音乐营销实验室\r\n[00:08.65]制作人：曲世聪\r\n[00:09.69]联合制作人：张杰\r\n[00:10.88]联合制作：行星文化Planet Culture\r\n[00:13.07]吉他：宋睿/曲世聪\r\n[00:13.32]Bass：宋睿\r\n[00:13.43]和声编写/和声：张杰/刘郡格/曲世聪\r\n[00:13.98]人声录音师：张杰\r\n[00:14.22]人声录音棚：未来&#8226;福录音室FUTURE&#8226;LIVE STUDIO\r\n[00:14.75]录音师：孙炜祁\r\n[00:14.94]录音室：Shicong Fatnunu\r\n[00:15.10]监制：罗悦菱Shirley@制作家工作室\r\n[00:15.51]出品：央视军事/腾讯音乐娱乐\r\n[00:15.93]OP：北京星光金曲文化传媒有限公司/腾讯音乐娱乐（制作家工作室）/星耀行星文化传媒（成都）有限公司\r\n[00:17.34]SP：华纳盛世音乐版权代理（北京）有限公司/腾讯音乐娱乐（制作家工作室）/星耀行星文化传媒（成都）有限公司\r\n[00:19.14]\r\n[00:21.43]当仰望天空 看到了自己\r\n[00:29.38]\r\n[00:31.95]那无所畏惧 的信念\r\n[00:37.31]\r\n[00:40.31]炙热的力量 受过的伤\r\n[00:44.76]\r\n[00:45.72]惊艳了山川 那道光\r\n[00:50.04]\r\n[00:51.19]多热烈 多坚决 的鲜血\r\n[00:59.72]\r\n[01:03.71]请让我像个勇士一样\r\n[01:06.13]冲向胜利最高点\r\n[01:08.25]\r\n[01:08.84]不用在意我的生命灿烂或平凡\r\n[01:12.69]我的身体里 会有一种热血天然\r\n[01:19.31]\r\n[01:21.00]请让我像个勇士一样\r\n[01:23.50]冲向胜利最高点\r\n[01:25.68]\r\n[01:26.31]勇敢的心 从来不要复杂的誓言\r\n[01:30.08]阳光下的自由 光芒会照亮我的心\r\n[01:38.38]\r\n[01:57.91]仗剑的青春 告别了从前\r\n[02:04.57]\r\n[02:05.74]烈火中破茧 崭新的我\r\n[02:11.18]\r\n[02:13.38]征途多遥远 无畏的脸\r\n[02:17.38]\r\n[02:18.01]那天的少年 那双眼\r\n[02:21.77]\r\n[02:22.38]某一天 若召唤 那闪电\r\n[02:29.66]\r\n[02:30.95]请让我像个勇士一样\r\n[02:33.31]哪怕一去不复还\r\n[02:35.42]\r\n[02:36.05]只有磨炼可以创造不朽的尊严\r\n[02:39.93]我的身体里 会有一种热血天然\r\n[02:47.06]\r\n[02:48.40]就让我像个勇士一样\r\n[02:50.78]哪怕一去不复还\r\n[02:52.85]\r\n[02:53.44]勇敢的心 生来就带着火焰\r\n[02:57.34]你的呼喊 填满炙热的心\r\n[03:05.79]请让我像个勇士一样\r\n[03:08.26]冲向胜利最高点\r\n[03:10.36]\r\n[03:11.03]不用在意我的生命灿烂或平凡\r\n[03:14.79]我的身体里 会有一种热血天然\r\n[03:22.00]\r\n[03:23.20]请让我像个勇士一样\r\n[03:25.69]冲向胜利最高点\r\n[03:27.81]\r\n[03:28.46]勇敢的心 从来不要复杂的誓言\r\n[03:32.21]阳光下的自由 光芒会照亮我的心\r\n[03:40.02]\r\n[03:40.73]请让我像个勇士一样\r\n[03:43.17]哪怕一去不复还\r\n[03:45.29]\r\n[03:45.83]只有磨炼可以创造不朽的尊严\r\n[03:49.67]我的身体里 会有一种热血天然\r\n[03:56.99]\r\n[03:58.16]就让我像个勇士一样\r\n[04:00.63]哪怕一去不复还\r\n[04:02.74]\r\n[04:03.27]勇敢的心 生来就带着火焰\r\n[04:07.17]你的呼喊 填满炙热的心",
            name: "热血天然",
            picture: "/img/song/热血天然.jpg",
            singerId: 1,
            singerName: "张杰",
            style: "流行",
            url: "/song/张杰-热血天然.mp3",
          }
        },
        {
          picture: require('../assets/img/carousel/4.jpg'), song: {
            album: "Time to Pretend",
            id: 121,
            lyric: "[00:00.000] 此歌曲为没有填词的纯音乐，请您欣赏\r\n[00:00.750]. \r\n[00:03.000].\r\n[00:35.149].\r\n[00:38.621].\r\n[00:42.211].\r\n[00:48.676].\r\n[00:52.751].\r\n[00:56.234].",
            name: "Time to Pretend",
            picture: "/img/song/Time.jpg",
            singerId: 100,
            singerName: "群星",
            style: "纯音乐 ",
            url: "/song/群星-Time to Pretend.mp3",
          }
        },
        {
          picture: require('../assets/img/carousel/5.jpg'), song: {
            album: "Hug me",
            id: 128,
            lyric: "[ti:Hug me (抱我)]\r\n[ar:蔡徐坤]\r\n[al:Hug me (抱我)]\r\n[by:p_pxjwang]\r\n[offset:0]\r\n[00:00.00]Hug me (抱我) - 蔡徐坤\r\n[00:00.60]作词：蔡徐坤\r\n[00:01.06]作曲：蔡徐坤\r\n[00:01.53]Baby just hug me hug me\r\n[00:04.51]Baby just hug me hug me\r\n[00:07.42]每一次心动的原因\r\n[00:10.52]全部都是因为你\r\n[00:13.56]\r\n[00:17.10]用一首歌的时间\r\n[00:18.70]在海边荡个秋千\r\n[00:20.32]巴厘岛的咖啡店\r\n[00:22.55]\r\n[00:23.20]这空气突然变甜\r\n[00:24.81]是听到你的名字\r\n[00:26.30]不经意出现在耳边\r\n[00:29.49]想去的星球\r\n[00:33.22]要多久能带你走\r\n[00:35.51]想抱紧之后\r\n[00:39.29]就永远不再放手\r\n[00:40.90]Baby just hug me hug me\r\n[00:43.84]Baby just hug me hug me\r\n[00:46.81]每一次心动的原因\r\n[00:49.92]全部都是因为你\r\n[00:53.01]简单的 爱你 爱你\r\n[00:55.93]想和你在一起一起\r\n[00:59.82]不要只是\r\n[01:02.91]短暂的拥抱\r\n[01:06.20]\r\n[01:08.85]你属于天意\r\n[01:10.12]那种命中注定\r\n[01:11.90]我还是无法\r\n[01:13.16]直视你的眼睛\r\n[01:14.98]\r\n[01:15.50]在拥抱过后\r\n[01:16.53]画下了彩虹\r\n[01:18.44]被时间偷走\r\n[01:19.54]没做完的梦\r\n[01:20.93]想去的星球\r\n[01:24.88]还来不及带你走\r\n[01:27.16]想抱紧之后\r\n[01:30.87]就永远不再放手\r\n[01:32.60]Baby just hug me hug me\r\n[01:35.50]Baby just hug me hug me\r\n[01:38.47]每一次心动的原因\r\n[01:41.52]全部都是因为你\r\n[01:44.61]就这样 爱你 爱你\r\n[01:47.58]只要能在一起一起\r\n[01:51.44]不会只是\r\n[01:54.47]短暂的拥抱\r\n[01:57.62]\r\n[01:59.26]Could u just\r\n[02:00.99]\r\n[02:13.50]想去的星球\r\n[02:17.27]还来不及带你走\r\n[02:19.59]想抱紧之后\r\n[02:23.36]就永远不再放手",
            name: "Hug me",
            picture: "/img/song/Hug me.jpg",
            singerId: 103,
            singerName: "蔡徐坤",
            style: "流行",
            url: "/song/蔡徐坤-Hug me.mp3",
          }
        },
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/css/swiper.scss";
</style>